<template>
  <div>
    <div>
      我的收藏
    </div>
    <div v-if="textTips!==''" style="height: 350px;display: flex;font-weight: bold;font-size: xxx-large;color: #cccccc;
                               justify-content:center;align-items: center">
      {{textTips}}
    </div>
    <!--列表形式展示文章   不使用表格-->
    <ArticleListCard :article-info-data="currentTableData_articleInfo"/>
    <!-- 分页-->
    <div>
      <el-pagination
          @size-change="handleSizeChange_articleInfo"
          @current-change="handleCurrentChange_articleInfo"
          :current-page="currentPage_articleInfo"
          :page-sizes="[1,2,3,4,5,10, 20, 30, 50]"
          :page-size="pageSize_articleInfo"
          layout="total, sizes, prev, next, jumper"
          :total="total_articleInfo"
      />
    </div>
  </div>
</template>

<script>
import {
  get_articleStarInfo
} from "@/api/articleInfo";
import {getUserName} from "@/api/token";
import {get_articleStarDetailInfoNoPage} from "@/api/starDetailsInfo.js";

export default {
  name: "ArticleStar",
  created() {
    this.getStarArticleId()
    // this.initData_articleInfo();
  },
  data() {
    return {
      textTips:'',
      // 所有的star的文章id数组
      articleIdStarList:[],
      // 列表或者表格显示模式
      isList:true,
      // 查询表单
      queryForm_articleInfo: {
        username: null,
        content: null,
        title:null,
        createTime: null,
        updateTime: null,
        likes: null,
        collections: null,
        tags: null,
        permissionList: null,
        remark: null,
        pageNum: 1,
        pageSize: 4
      },
      // 表格遮罩层
      loadingTable_articleInfo: true,
      // 表单对齐方式
      labelPosition_articleInfo: 'left',
      // 当前表格显示数据（前端分页后的数据）
      currentTableData_articleInfo: [],
      // 当前显示页数
      currentPage_articleInfo: 1,
      // 每页大小
      pageSize_articleInfo: 4,
      // 总数量
      total_articleInfo: 0,
    }
  },
  methods: {
    /**
     * 查询此账户所有收藏的文章id
     */
    getStarArticleId() {
      get_articleStarDetailInfoNoPage({
        collector: getUserName(),
      }).then((res) => {
        let dataArr = res.data;
        dataArr.forEach(item => {
          this.articleIdStarList.push(item.articleId)
        })
        // console.log('收藏文章id', this.articleIdStarList)
        // 再根据文章id查询文章数据
        this.initData_articleInfo();
      }).catch((err) => {

      })
    },
    // 后端数据
    getInfoFromBack_articleInfo(queryForm) {
      get_articleStarInfo(queryForm).then((res) => {
        if(res.data===null){
          this.textTips = res.message
        }else {
          this.total_articleInfo = res.data.total
          this.currentTableData_articleInfo = res.data.tableData
          this.loadingTable_articleInfo = false
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 分页栏换条数
    handleSizeChange_articleInfo(val) {
      this.queryForm_articleInfo.pageSize = val
      this.queryForm_articleInfo.pageNum = 1
      this.getInfoFromBack_articleInfo(this.queryForm_articleInfo)
    },
    // 选择页数
    handleCurrentChange_articleInfo(val) {
      this.queryForm_articleInfo.pageNum = val
      this.getInfoFromBack_articleInfo(this.queryForm_articleInfo)
    },
    // 初始化本页所需数据
    initData_articleInfo() {
      this.queryForm_articleInfo.username = getUserName()
      this.queryForm_articleInfo.articleIdList = this.articleIdStarList
      // console.log('username****',this.queryForm_articleInfo.username)
      this.getInfoFromBack_articleInfo(this.queryForm_articleInfo)
    },
    /**
     * 打开富文本阅读页面
     * @param articleId
     */
    openQuillReadPage(articleId) {
      this.$router.push({
        path: '/index/read-text',
        query: {
          articleId: articleId
        }
      })
    },
  },
}
</script>

<style scoped>

</style>